<template>
  <div>
    <button @click="addPermission">添加权限</button>
    <button @click="deletePermissions">批量删除权限</button>
     <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    @selection-change="handleSelectionChange"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
     <el-table-column type="selection" width="60"> </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      sortable
      width="180">
    </el-table-column>
     <el-table-column
      prop="pname"
      label="上级菜单">
    </el-table-column>
     <el-table-column
      prop="type"
      label="类型">
              <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
          <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>

    </el-table-column>
     <el-table-column
      prop="url"
      label="菜单URL">
    </el-table-column>  
     <el-table-column
      prop="status"
      label="授权标识">
              <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" size="small" type="success">启用</el-tag>
          <el-tag v-else-if="scope.row.status ===2" size="small" type="danger">禁用</el-tag>
        </template>

    </el-table-column>
     <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="deleteP(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
  </el-table>
    
  </div>
</template>

<script>
export default {
  methods: {
    deletePermissions(){
      //遍历获取的所有每行数据
      this.idlist.forEach((permission,index) => {
        //将其中的id值存入ids数组
          this.ids[index]=(permission.id)
      });
      console.log(this.ids);
      this.$httpRequest.post("/permission/deletePermissions",
        //将数组发送到后端批量进行删除
      this.ids    
    )
      .then((data)=>{
        // console.log(this.ids);
        console.log(data);
        this.$router.go(0);
      })
      .catch((err)=>{
        console.log(err)
      })
    },
    handleSelectionChange(val){
        this.idlist=val;
        // console.log(this.idlist);
  },
    statusFormatter(row, column, cellValue, index) {
      return cellValue == 1 ? "启用" : "禁用";
    },
    //row：该行所有数据
    handleClick(row) {
      this.$router.push("/toAddOrUpdateP/" + row.id);
    },
   
    findAll() {
      var app = this;
      this.$httpRequest
        .post("auto/selectAllJson")
        .then(({ data }) => {
        this.tableData= this.$format(data.data)
        console.log(data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加权限跳转
    addPermission() {
      this.$router.push("/toAddOrUpdateP");
    },
    //删除
    deleteP(row) {
      var app = this;
      this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$httpRequest
            .get("permission/deletePermissionById", {
              params: { id: row.id },
            })
            //删除成功后的操作
            .then(() => {
              //弹框根据用户的确定取消返回不同的操作
              this.$message({
                showClose: true,
                type: "success",
                message: "删除成功!",
                duration: 1500,
                onClose: () => {
                  this.$router.go(0);
                },
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消删除",
            duration: 1500,
          });
        });
    },
  },
  mounted: function () {
    this.findAll();
  },
  data() {
    return {
      tableData: [
        {
          id: "",
          name: "",
          url: "",
          type: "",
          status: "",
          pid: "",
          pname:""
        },
      ],
      idlist:[],
     
      ids:[],
    };
  },
};
</script>

<style>
</style>